const {src, dest, series, parallel, watch} = require('gulp')
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
const del = require('del')
const browserSync = require('browser-sync')
const bs = browserSync.create() // 会自动创建一个开发服务器
const cwd = process.cwd() // <!-- cwd方法会返回当前命令行所在的工作目录-->
const data = {
}
let config = {
    build: {
        src: 'src',
        public: 'public',
        dist: 'dist',
        temp: 'temp',
        paths: {
            style: 'css/**',
            js: 'js/*.js',
            image: 'images/**',
            html: '*.html',
            fonts: 'fonts/**'
        }
    }
}
const clean = () => {
    return del([config.build.dist, config.build.temp])
}
// 转换sass
const style = () => {
    return src(config.build.paths.style, {base: config.build.src, cwd: config.build.src})
           .pipe(plugins.sass({outputStyle: 'expanded'})) // 会自动将扩展名为scss的文件后缀改为css
           .pipe(dest(config.build.temp))
}
// 转换js
const script = () => {
    return src(config.build.paths.js, {base: config.build.src, cwd: config.build.src})
           .pipe(plugins.babel({presets: [require('@babel/preset-env')]}))
           .pipe(dest(config.build.temp))
}
// 转换pages
const pages = () => {
    return src(config.build.paths.html, {base: config.build.src, cwd: config.build.src})
           .pipe(plugins.swig(data))
           .pipe(dest(config.build.temp))
}
// 转换image
const image = () => {
    return src(config.build.paths.image, {base: config.build.src, cwd: config.build.src})
        //    .pipe(plugins.imagemin()) // imagemin插件安装不正确，没办法压缩
           .pipe(dest(config.build.dist))
}
// 处理svg及字体文件, 对于不能被压缩的文件，imagemin不会被处理
const fonts = () => {
    return src(config.build.paths.fonts, {base: config.build.src, cwd: config.build.src})
        //    .pipe(plugins.imagemin()) // imagemin插件安装不正确，没办法压缩
           .pipe(dest(config.build.dist))
}
// 处理其他文件，直接拷贝
const extra = () => {
    return src('**', {base: config.build.public, cwd: config.build.public})
           .pipe(dest(config.build.dist))
}
const serve = () => {
    // 监听文件变化并编译
    watch(config.build.paths.style, {cwd: config.build.src}, style)
    watch(config.build.paths.js, {cwd: config.build.src}, script)
    watch(config.build.paths.html, {cwd: config.build.src}, pages)
    // watch('src/images/**/**', image)
    // watch('src/fonts/**', fonts)
    // watch('public/**', extra) 在开发阶段不需要做静态资源的编译，会增加开销
    watch([
        config.build.paths.image,
        config.build.paths.fonts
    ], {cwd: config.build.src}, bs.reload) // 监听到以上三个文件变化时执行reload方法，一个方法就是一个任务
    watch([
        '**'
    ], {cwd: config.build.public}, bs.reload) // 监听到以上三个文件变化时执行reload方法，一个方法就是一个任务
    bs.init({
        files: 'temp/**', // 监听dist下的所有文件，文件更改自动刷新页面
        notify: false, // 右上角不会出现connected提示
        // port: 2080,
        // open: false, // 默认为自动打开浏览器
        server: {
            baseDir: config.build.temp, // 设置网站根目录
            baseDir: [config.build.temp, config.build.src, config.build.public], // 一旦指定为数组，所有请求都会从第一个数组去找，如果找不到就去第二个，依次往后
            routers: {
                '../node_modules': 'node_modules' // 通过routers，将所有/node_modules开头的资源请求都指到node_modules下，routers中的配置会优先于baseDir
            }
        }
    })
}

// useref合并
const useref = () => {
    return src(config.build.paths.html, {base: config.build.temp, cwd: config.build.temp})
           .pipe(plugins.useref({searchPath: [config.build.temp, '.']})) //<!-- 寻找资源路径，分别是dist目录和项目根目录, 数组中通常把使用较多的放前面-->
           .pipe(plugins.if(/\.js$/, plugins.uglify()))
           .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
           .pipe(plugins.if(/\.html$/, plugins.htmlmin({collapseWhitespace: true})))
           .pipe(dest(config.build.dist))
}
const compile = parallel(style, script, pages)
const build = series(clean, parallel(series(compile, useref), image, fonts, extra))
const develop = parallel(compile, serve)
module.exports = {
    develop,
    clean,
    build,
    style,
    pages,
    script,
    image
}